<template>
    <div class="leftbox">
       <!-- 上 -->
       <div class="leftitem">
             <h3>新增确诊TOP10</h3>
              <div class="left1"></div>
             
       </div>
       <!-- 中 -->
       <div class="leftitem">
          <h3>大洲感染总人数趋势图</h3>
           <div class="left2"></div>
       </div>
       <!-- 下 -->
       <div class="leftitem">
          <h3>大洲感染人数饼状图</h3>
           <div class="left3"></div>
       </div>
    </div>
</template>
<script setup>
 import  echarts  from  'echarts'
 import {ref,reactive,onMounted} from 'vue'
 import  $  from  'jquery'
import { left1, left2,left3} from "@/compoenfun/option.js";

onMounted(() => {
  $.ajax({
    url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
    dataType: "jsonp",
    success: (res) => {
      let data = JSON.parse(res.data);
      console.log(data,33);
      left1(data);
      left2(data);
    //   rigth1(data);
      left3(data);
    //   centermap(data);
    //   rigth2(data)
    },
  });
});

 
</script>
<style lang="scss" scoped>
.leftitem{
    width: 100%;
    height: 31%;

    margin:   15px 0 0 0px ;
    box-sizing: border-box;
    // background-color: antiquewhite;
    border: 1px solid #807f7f;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    h3{
        margin: 0;
        padding: 0;
        font-size: 21px;
        color: #fff;
        font-weight: 500;
    }
    .left1{
        width: 100%;
        height: 90%;
    }
    .left2,.left3{
        width: 100%;
        height: 90%;
        // background-color: #f0efef23
    }
    
}
</style>

